<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      style="margin-top: 6px"
      size="small"
      label-width="90px"
    >
      <el-form-item label="商品名称" prop="subject">
        <el-input v-model="form.subject" style="width: 35%" />
      </el-form-item>
      <el-form-item label="商品价格" prop="totalAmount">
        <el-input v-model="form.totalAmount" style="width: 35%" />
        <span style="color: #c0c0c0; margin-left: 10px"
          >测试允许区间(0,5000]</span
        >
      </el-form-item>
      <el-form-item label="商品描述" prop="body">
        <el-input
          v-model="form.body"
          style="width: 35%"
          rows="8"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          @click="doSubmit"
          >去支付</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { toAliPay } from "@/api/tools/alipay";
export default {
  data() {
    return {
      url: "",
      // 新窗口的引用
      newWin: null,
      loading: false,
      form: { subject: "", totalAmount: "", body: "" },
      rules: {
        subject: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        totalAmount: [
          { required: true, message: "商品价格不能为空", trigger: "blur" },
        ],
        body: [
          { required: true, message: "商品描述不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    url(newVal, oldVal) {
      if (newVal && this.newWin) {
        this.newWin.sessionStorage.clear();
        this.newWin.location.href = newVal;
        // 重定向后把url和newWin重置
        this.url = "";
        this.newWin = null;
      }
    },
  },
  methods: {
    doSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 先打开一个空的新窗口，再请求
          this.newWin = window.open();
          let url = "";
          if (/(Android)/i.test(navigator.userAgent)) {
            // 判断是否为Android手机
            url = "aliPay/toPayAsWeb";
          } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            // 判断是否为苹果手机
            url = "aliPay/toPayAsWeb";
          } else {
            url = "aliPay/toPayAsPC";
          }
          toAliPay(url, this.form)
            .then((res) => {
              this.loading = false;
              this.url = res;
            })
            .catch((err) => {
              this.loading = false;
              console.log(err.response.data.message);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped></style>
